<template>
  <div class="header">
  <div class="top-bar">
    <div class="nav-box">
      <Logo/>
<!--      <div class="logo" @click="goHome">-->
<!--        <img v-if="$i18n.locale === 'en'" src="https://intelaulinpro.oss-cn-beijing.aliyuncs.com/common/logo-en.png"/>-->
<!--        <img v-else src="https://intelaulinpro.oss-cn-beijing.aliyuncs.com/common/logo-zh.png"/>-->
<!--      </div>-->

      <nav class="menu" v-if="isLogin">
        <NuxtLink
            v-for="(item,index) in menuList"
            @click.native="handleMainMenuClick(index)"
            :key="item"
            :class="[ activeIndex === index ? 'menu-item-active' : '', 'menu-item']"
            :to="$i18n.path(item)"
            exact
        >
          {{ $t(`header.mainMenu[${index}]`) }}
        </NuxtLink>

      </nav>
    </div>
    <div class="tools">
      <div class="tools-item" @click="handleUserIconClick">
        <img src="../../assets/images/icon-user.png" alt="">
      </div>
      <div class="tools-item">
        <img src="../../assets/images/icon-lang.png" alt="">
        <span style="padding-left: 10px;">
          {{ $t('header.language') }}
        </span>
<!--        <NuxtLink v-if="$i18n.locale === 'zh'" @click.native="refresh" :to="`/en${$route.fullPath}`" active-class="none" exact>-->
<!--          {{ $t('header.language') }}-->
<!--        </NuxtLink>-->
<!--        <NuxtLink @click.native="refresh" v-else :to="$route.fullPath.replace(/^\/[^\/]+/, '')" exact>-->
<!--          {{ $t('header.language') }}-->
<!--        </NuxtLink>-->
      </div>
    </div>
  </div>
    <UserInfoMask
        v-if="loginShow"
        @redirect="handleUserInfoRedirect"
        @loginStateChange="handleLoginStateChange"
    />
  </div>
</template>

<script>
import UserInfoMask from "../login/UserInfoMask";
import Logo from "./Logo";
export default {
  name: "HeaderBar",
  components: {
    UserInfoMask,
    Logo
  },
  data () {
    return {
      menuList: ['', 'itinerary', 'faq', 'contact']
    }
  },
  computed: {
    activeIndex () {
      return this.$store.state.menuIndex
    },
    loginShow () {
      return this.$store.state.loginShow
    },
    isLogin () {
      return this.$store.state.isLogin
    }
  },
  mounted() {
    if (localStorage.getItem('overnight_token')) {
      this.$store.commit('SET_LOGIN_STATE', true)
    }
  },
  created () {
    let path = this.$route.path.split('/')
    let page = path[path.length -1 ]
    const index = this.menuList.findIndex(item => item === page)
    this.$store.commit('SET_MENU_INDEX', index)
  },
  methods: {
    handleMainMenuClick (index) {
      this.$store.commit('SET_MENU_INDEX', index)
    },
    handleUserIconClick () {
      this.$store.commit('SET_LOGIN_SHOW', !this.loginShow)
    },
    handleUserInfoRedirect () {
      this.$store.commit('SET_LOGIN_SHOW', false)
    },
    refresh () {
      // console.log(this.$route)
      // this.$router.push({
      //   path: this.$i18n.changeLang(this.$route.name)
      // })
      setTimeout(()=>{
        location.reload()
      },1000)

    },
    goHome() {},
    handleLoginStateChange () {
      this.isLogin = localStorage.getItem('token')
    }
  }
}
</script>

<style scoped>
.header {
  width: 100%;
  position: relative;
}
.top-bar {
  width: 100%;
  min-width: 1190px;
  height: 96px;
  background: white;
  border-bottom: 1px solid #D7D7D7;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-box {
  display: flex;
  align-items: center;
}
.logo > img {
  /*margin: 8px 16px;*/
}

.menu-item {
  font-size: 14px;
  color: #0068B5;
  text-align: center;
  margin: 0 26px;
  text-decoration: none;
}
.menu-item-active {
  font-weight: bold !important;
}
.tools {
  font-size: 10px;
  color: #0068B5;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.tools a {
  color: #0068B5;
  text-decoration: none;
  margin-left: 10px;
}
.tools-item {
  margin-right: 20px;
  display: flex;
  align-items: center;
}
</style>
